<template>
	<view class="page">
		<view class="uni-card">
			<view class="uni-card-header uni-card-media">
				<image class="uni-card-media-logo" :src="show.baseUrl + show.imgUrl"></image>
				<view class="uni-card-media-body">
					<text class="uni-card-media-text-top">{{show.nickname}}</text>
					<text class="uni-card-media-text-bottom">
							<text class="text">粉丝:{{show.fansCount}}  关注:{{show.followCount}}</text> 
						</text>
				</view>
				
			</view>
			<view class="uni-card-content">
				{{show.content}}
			</view>
			<view class="uni-card-content">
				<view class="uni-uploader__files" v-if="show.showPictures !== undefined">
					<block v-for="(picKey,index2)  in show.showPictures" :key="index2">
						<view class="uni-uploader__file">
							<image class="uni-uploader__img" :src="show.baseUrl +picKey.pictureKey"  @tap="previewImage"></image>
						</view>
					</block>
				</view>
			</view>
			<view class="uni-card-footer">
				<view>创建于{{show.createdStamp}}</view>
			</view>
		</view>
		<view v-if="show.upvoteUserInfos != null && show.upvoteUserInfos.length > 0" class="uni-card">
			<view class="uni-card-header uni-comment-hd uni-margin-10">
				共有{{show.upvoteUserInfos.length}}点赞
			</view>
			<view class="uni-card-content">
				<view class="uni-uploader__files" v-if="show.upvoteUserInfos !== undefined ">
					<block v-for="(upvoteUser,index3) in show.upvoteUserInfos" :key="index3">
						<view class="uni-uploader__file">
							<image class="uni-uploader__img" :src="show.baseUrl +upvoteUser.imgUrl" v-if="index3 < 3" ></image>
							<view v-if="index3 == 3" style="margin-top: 128px; opacity: 0.8; color: #D9D9D9;" @tap="goToUpvotes()">更多</view>
						</view>
					</block>
				</view>
			</view>
		</view>
		
		<view  v-if="comments.length <= 0" class="uni-empty-area" >
			<view class="uni-flex uni-column" style="text-align: center;justify-content: center;align-items: center;">
				<view class="empty-desc">评论</view>
				<image src="../../static/image/comment.png" class="empty-comments"></image>
				<view class="empty-desc">还没写评论，快来说两句</view>
			</view>
		</view>
		<view  class="uni-comment" v-else>
			<view class="uni-padding-10">
				<view class="uni-comment-hd" v-if="comments.length > 0">评论列表</view>
			</view>
			<view class="uni-comment-list" v-for="(item , index4) in comments" :key="index4">
				<view class="uni-comment-face"><image :src="item.baseUrl + item.imgUrl" mode="widthFix"></image></view>
				<view class="uni-comment-body">
					<view class="uni-comment-top">
						<text>{{item.nickname}}</text>
					</view>
					<view class="uni-comment-content">{{item.commentInfo}}</view>
					<view class="uni-comment-date">
						<view>{{item.createdStamp}}</view><view class="uni-comment-replay-btn">总共有{{item.replyCount}}回复</view>
					</view>
				</view>
			</view>
			<view class="uni-comment-footer">
			</view>
		</view>
		<view class="uni-comment-formbox" style="background: white;">
			<view class="uni-comment-input-btn" v-if="isShowComment" @click="showComment">评论是一种美德</view>
			<form class="uni-comment-formbox-form" v-if="isShowCommentArea">
				<textarea class="uni-comment-formbox-textarea" placeholder="评论是一种美德,最少20个字" v-model="commentInfo"></textarea>
				<view class="uni-comment-formbox-btns">
					<view class="uni-comment-formbox-bt" @click="sendComment">评论</view>&nbsp;&nbsp;&nbsp;&nbsp;
					<view class="uni-comment-formbox-bt" @click="cancelComment">取消</view>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	import {
		get,
		getComments,
		addComment
	} from '../../api/cms/page.js';
	import {
		getUrl
	} from '../../common/oss';
	import card from '../../components/card.vue';
	import footer from '../../components/cms/footer.vue';
	import {
		mapGetters,mapState 
	} from 'vuex'
	export default {
		components: {
			card,
			footer
		},
		data() {
			return {
				show: {},
				comments: [],
				replyPartyId: "",
				replyNickName: "",
				replyCommentId: "", 
				isShowComment: true,
				isShowCommentArea: false,
				text: "",
				showDetailLoaded: false,
				reload: false,
				page: 1,
				pageSize: 10,
				commentInfo: ""
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo
			}),
		},
		onUnload: function() {
			this.show = {};
			this.reload = false;
		},
		onLoad: function(e) {
			console.log(JSON.stringify(e));
			this.page = 1;
			this.reload = true;
			this.loadShow(e.showId);
		},
		onReachBottom: function() {
			this.loadComments();
		},
		methods: {
			onReply: function(id, partyId, nickname) {
				this.commentInfo = "@"+ nickname+ ":"
				this.replyCommentId = id;
				this.replyPartyId = partyId;
			},
			showComment: function() {
				this.isShowComment = false;
				this.isShowCommentArea = true;
				console.log(this.isShowComment)
			},
			loadShow: function(showId) {
				var that = this;
				get(showId).then(function(res) {
					console.log(JSON.stringify(res))
					//res = res.data
					res.baseUrl = getUrl();
					console.log("个人信息：" + res.baseUrl + res.imgUrl)
					that.show = res;
					that.showDetailLoaded = true;
					that.loadComments(showId);
				});
			},
			loadComments: function(showId) {
				var that = this;
				let params = {
					"showId": showId,
					"orderBy": "createdStamp",
					"sort": "desc"
				};
				params.page = that.page;
				params.limit = that.pageSize;
				getComments(params).then(function(res) {

					console.log("评论:" + JSON.stringify(res.data));
					if (res.data.length > 0) {
						for (var i = 0; i < res.data.length; i++) {
							res.data[i].baseUrl = getUrl();
							console.log("评论:" + JSON.stringify(res.data[i].nickname));
						}
						that.comments = that.reload ? res.data : that.comments.concat(res.data);
						that.page++;
					}

				})
			},
			previewImage() { //预览图片
				var imageList = [];
				for(var i = 0; i < this.show.showPictures.length; i++)
				{
					imageList.add(getUrl(this.show.showPictures[i].pictureKey))
				}
				uni.previewImage({
					urls: this.imageList
				});
			},
			sendComment: function() {
				console.log(this.commentInfo)
				if(this.commentInfo.length < 20) {
					uni.showToast({
						title: "至少需要20个字符， 谢谢"
					})
				}
				
				addComment({
					"commentInfo": this.commentInfo,
					"partyId": this.userInfo.partyId,
					"commentType": this.replyCommentId.length <=0 ? "COMMENT_NORMAL": "REPLY_CONTENT",
					"isOk": "N",
					"commentStatusId": "COMMENT_CHECK",
					showId: this.show.showId,
					parentCommentId: this.replyCommentId,
					replyCount: 0,
					upvoteCount: 0,
				}).then(res => {
					console.log(JSON.stringify(res));
					if(res.status == 200 && res.rel == true)
					{
						this.isShowComment = true;
						this.isShowCommentArea = false;
						console.log(this.isShowComment);
						uni.showToast({
							title: "发表评论成功，您的品德真棒,请耐心等待管理员审批，谢谢"
						})
						
					} else {
						uni.showToast({
							title: "网络出现问题了，评论不成功，请再重试一遍，行吗"
						})
						
					}
				
				})
				
			
				//this.isShowCommentArea = false;
			},
			cancelComment: function() {
				this.isShowComment = true;
				console.log(this.isShowComment);
				this.isShowCommentArea = false;
			},
			goToUpvotes: function() {
				
			}
		}
	}
</script>

<style>

	page {
		background-color: #EFEFF4;
		width: 750upx;
		height: 100%;
	}
	
	.empty-comments {
		width: 250upx;
		height: 250upx;
		
	}
	
	.uni-comment {
		min-height: 250upx;
		
	}
	
	.uni-card {
		margin-bottom: 0upx;
		box-shadow: none;
		
	}
	
	.uni-card-content {
		padding-left: 10upx;
		padding-right: 10upx;
	}

	.upvote-image-box {
		flex-grow: 1;
		padding: 10upx;
	}

	.upvote-image-box image {
		width: auto;
		min-width: 100upx;
		height: 100upx;
	}

	.box {
		display: flex;
		flex-wrap: wrap;
		padding: 10upx;
	}

	.box:after {
		content: '';
		flex-grow: 99999;
	}



	

	.foot {
		position: fixed;
		width: 100%;
		height: 90upx;
		min-height: 90upx;
		left: 0upx;
		bottom: 0upx;
		overflow: hidden;
	}
	
	.empty-min-height {
		min-height: 700upx
	}
</style>
